<script setup lang="ts">
import { InjectLabelKey } from "@/views/domain/kubeHud/api/k8s/defination";
import { Deployment } from "@/views/domain/kubeHud/api/k8s/types";
import NamespaceSelector from "../../namespace/widgets/NamespaceSelector.vue";
import { useDeploymentEditor } from "./createProvider";
import { ref } from "vue";
import KResourceMetadata from "../../components/KResourceMetadata.vue";
import KeyValueWidget from "../../components/KeyValueWidget.vue";

const { editDeployment, updateDeploymentName } = useDeploymentEditor();
const baseForm = ref();
const rule = {
  "metadata.name": [
    {
      required: true,
      message: "请输入名称",
      trigger: "blur"
    },
    {
      min: 1,
      max: 253,
      message: "长度在 1 到 253 个字符",
      trigger: "blur"
    }
  ],
  "metadata.namespace": [
    {
      required: true,
      message: "请选择命名空间",
      trigger: "blur"
    }
  ]
};

// spec.selector.matchLabels  = metadata.labels
const matchLabelEqualToMetadata = ref(true);
const switchMatchLabelEqualToMetadata = (val: boolean) => {
  matchLabelEqualToMetadata.value = val;
  if (val) {
    editDeployment.value.spec.selector.matchLabels =
      editDeployment.value.metadata.labels;
  } else {
    editDeployment.value.spec.selector.matchLabels = {};
  }
};
const onLabelChanged = (data?: any) => {
  if (!matchLabelEqualToMetadata.value) return;

  if (data) {
    editDeployment.value.spec.selector.matchLabels = data;
  } else {
    editDeployment.value.spec.selector.matchLabels = {};
  }
};

defineExpose({
  validate: () => baseForm.value.validate()
});
</script>

<template>
  <el-form
    ref="baseForm"
    :model="editDeployment"
    label-position="top"
    :rules="rule"
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="名称" prop="metadata.name">
          <el-input
            v-model="editDeployment.metadata.name"
            @change="updateDeploymentName"
          />
          <el-text size="small">
            名称只能包含小写字母、数字和连字符（-），必须以小写字母或数字开头和结尾，最长
            253 个字符。
          </el-text>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="别名">
          <el-input
            v-model="editDeployment.metadata.annotations[InjectLabelKey.Alias]"
          />
          <el-text size="small"> 别名可包含任意字符，最长 63 个字符。 </el-text>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="副本数">
          <el-input-number v-model="editDeployment.spec.replicas" :min="1" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="命名空间" prop="metadata.namespace">
          <NamespaceSelector
            v-model:model-value="editDeployment.metadata.namespace"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="描述" prop="metadata.desc">
          <el-input type="textarea" :rows="2" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <KResourceMetadata
          v-model:model-value="editDeployment.metadata"
          edit
          @label-change="onLabelChanged"
        />
      </el-col>
      <el-col :span="12">
        <el-form-item label="选择标签">
          <template #label>
            <div class="flex gap-2 items-center justify-between w-full">
              <el-tooltip
                content="使用 metadata.labels 作为 spec.selector.matchLabels "
                placement="top-start"
              >
                <span>选择标签使用元数据</span>
              </el-tooltip>
              <div class="flex gap-1 items-center">
                <el-switch
                  v-model="matchLabelEqualToMetadata"
                  @change="switchMatchLabelEqualToMetadata"
                />
              </div>
            </div>
          </template>
          <KeyValueWidget
            v-model:model-value="editDeployment.spec.selector.matchLabels"
            :edit="!matchLabelEqualToMetadata"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<style lang="scss" scoped></style>
